const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
//拷贝插件
// copy-webpack-plugin
//自动删除dist目录
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin')

module.exports = {
    mode: 'production',
    //开启监视模式 监视本地项目文件变化也可以在package.json里面加--watch 监视本地文件的实时改变进行打包
    // watch: true,
    //入口
    entry: { //多页应用打包写对象
        index: './src/main.js',
        other: './src/other.js'
    },
    // 输出
    output: {
        //path.resolve():解析当前路径的绝对路径
        path: path.resolve('./dist/'), //输出路径必须是绝对路径
        filename: '[name].[contenthash:5].js' //按原文件名输出  contenthash为内容hash，内容发生改变时更新
    },
    //配置webpack-dev-server
    // devServer: {
    //     open: true,
    //     hot: true,
    //     compress: true,
    //     port: 12345,
    //     contentBase: './src'
    // }
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',
            chunks: ['index']
        }), //多页应用创建多个实例化对象
        new HtmlWebpackPlugin({
            filename: 'other.html',
            template: './src/other.html',
            chunks: ['other']
        }),
        new CleanWebpackPlugin(),
        //给打包的js头部加注释
        new webpack.BannerPlugin('666'),
        //定义一个环境变量，区分线上和线下环境
        new webpack.DefinePlugin({
            IS_DEV: 'false'
        })
    ],
    module: {
        rules: [{
                test: /\.css$/,
                //webpack读取loader时，是从右往左读取，会将css文件先交给最右侧的loader来处理
                //loader的执行顺序是从右到左以管道的方式链式调用
                use: ['style-loader', 'css-loader']
            }, {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }, {
                test: /\.s(a|c)ss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(jpg|jpeg|png|bmp|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 5 * 1024,
                        //将图片统一放到images文件夹下
                        outputPath: 'images',
                        //name原图片名字hash随机hash值冒号后面是hash位数ext原扩展名
                        name: '[name]-[hash:5].[ext]'
                    }
                }
            },
            {
                test: /\.(woff|woff2|eot|svg|ttf)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        outputPath: 'fonts'
                    }
                }
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader'
                },
                exclude: /node_modules/
            },
            {
                test: /\.(htm|html)$/i,
                loader: 'html-withimg-loader'
            }
        ]
    },
    //关闭 webpack 的性能提示
    // performance: {
    //     hints: false
    // }
    //或者
    //警告 webpack 的性能提示
    performance: {
        hints: 'warning',
        //入口起点的最大体积
        maxEntrypointSize: 50000000,
        //生成文件的最大体积
        maxAssetSize: 30000000,
        //只给出 js 文件的性能提示
        assetFilter: function (assetFilename) {
            return assetFilename.endsWith('.js');
        }
    }
}